<script setup>
import { computed } from 'vue';
import { useImageList } from '../../store/imgList';
	const props = defineProps({
		info:Object,
		index:{
			type: Number,
			default: 0
		},
		list:{
			type:Array,
			default : []
		},
		current: {
			type:Number,
			default:0
		},
		title: String
	})
	const date = computed(()=>{
		let str = new Date(props.info.updateTime)
		return str.getFullYear()+"-"+str.getMonth()+"-"+str.getDate()
	})
	
	const pushTypeList =() => {
		uni.navigateTo({
			url:`/pages/typeList/typeList?classid=${props.info._id}&title=${props.title}`
		})
	}
	const pushPre = () => {
		const imagelist = useImageList()
		imagelist.setList(props.list)
		uni.navigateTo({
			url:`/pages/preImage/preImage?deindex=${props.current}`
		})
	}
</script>
<template>
	<view v-if="index ===-1" class="card">
		<image  @click="pushPre"
			style="border-radius: 15rpx;width: 230rpx;height: 500rpx;"
			 :src="info.smallPicurl" 
			 mode="aspectFill"/>
	</view>
	<view v-if="index ===8"  class="card">
		<image
			style="margin-top:20rpx; 15rpx;width: 230rpx;height: 500rpx;border-radius: 15rpx;"
			 :src="info.picurl" 
			 mode="aspectFill"/>
		<view class="txt2">
			<text class="txt-t2">更多精选</text>
		</view>
	</view>
	<view v-if="index !==8&&index!==-1" class="card">
		<view class="card-h" v-if="true">
		<text  class="card-h-ul">&nbsp;●&nbsp;{{date}}更新</text>
		</view>
		<image @click="pushTypeList"
		style="border-radius: 15rpx;width: 230rpx;height: 500rpx;"
		 :src="info.picurl" 
		 mode="aspectFill"/>
	<view class="txt">
		<text class="txt-t">{{info.name}}</text>
	</view>
	</view>
</template>

<style lang="scss" scoped>
	.card {
		position: relative;
		height: 550rpx;
		
	}
	.card-h {
		font-size: 18rpx;
		max-width: 170rpx;
		position: relative;
		top: 20rpx;
		z-index: 200;
		background-color: rgba(255, 93, 0, 0.8);
		border-radius: 35rpx;
	}
	.card-h-ul{
		color: white;
	}
	.txt {
		border-radius: 15rpx;
		opacity: 0.9;
		color: white;
		width:230rpx;
		height:100rpx;
		text-align: center;
		position: relative;
		bottom: 108rpx;
		z-index: 200;
		font-size: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		 backdrop-filter: blur(20px);
		 .txt-t {
			 opacity: 1;
		 }
	}
.txt2{
	border-radius: 15rpx;
	opacity: 0.9;
	color: white;
	width:230rpx;
	height:500rpx;
	text-align: center;
	position: relative;
	bottom: 508rpx;
	z-index: 200;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	 backdrop-filter: blur(20px);
	 .txt-t {
		 opacity: 1;
	 }
}
</style>